<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>Hexo博客 | 博客中能用到的代码（一） | Justlovesmile's BLOG</title><meta name="keywords" content="前端,Hexo,博客"><meta name="author" content="Justlovesmile,865717150@qq.com"><meta name="copyright" content="Justlovesmile"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="这篇文章介绍了如何使用font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效，之前还介绍过打字机效果，可以看看这篇文章"><meta property="og:type" content="article"><meta property="og:title" content="Hexo博客 | 博客中能用到的代码（一）"><meta property="og:url" content="https://blog.justlovesmile.top/posts/56163.html"><meta property="og:site_name" content="Justlovesmile&#39;s BLOG"><meta property="og:description" content="这篇文章介绍了如何使用font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效，之前还介绍过打字机效果，可以看看这篇文章"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/090412-1557363852af44.jpg"><meta property="article:published_time" content="2020-04-08T16:16:47.000Z"><meta property="article:modified_time" content="2020-04-08T16:16:47.000Z"><meta property="article:author" content="Justlovesmile"><meta property="article:tag" content="前端"><meta property="article:tag" content="Hexo"><meta property="article:tag" content="博客"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/090412-1557363852af44.jpg"><link rel="shortcut icon" href="/img/logo.jpg"><link rel="canonical" href="https://blog.justlovesmile.top/posts/56163"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//hm.baidu.com"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" media="print" onload='this.media="all"'><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?a2ee893562999ebad688b0d82daa100a";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/font/family=Titillium+Web.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:{path:"search.xml",languages:{hits_empty:"找不到您查询的内容：${query}"}},translate:void 0,noticeOutdate:void 0,highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:400},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"天",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:100,languages:{author:"作者: Justlovesmile",link:"链接: ",source:"来源: Justlovesmile's BLOG",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"var(--mj-card-bg)",bgDark:"var(--mj-card-bg)",position:"top-right"},source:{justifiedGallery:{js:"https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js",css:"https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"Hexo博客 | 博客中能用到的代码（一）",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2020-04-09 00:16:47"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const a=864e5*o,n={value:t,expiry:(new Date).getTime()+a};localStorage.setItem(e,JSON.stringify(n))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise((t,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)}),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme"),o=(new Date).getHours();void 0===t?o<=6||o>=18?activateDarkMode():activateLightMode():"light"===t?activateLightMode():activateDarkMode();/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="/css/justlovesmile.css"><link rel="stylesheet" href="/css/blogicon.css"><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Justlovesmile's BLOG" type="application/atom+xml"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="" data-lazy-src="/img/avatar.jpg" onerror='onerror=null,src="/img/friend_404.gif"' alt="avatar"></div><div class="site-data is-center"><div class="data-item"><a href="/archives/"><div class="headline">文章</div><div class="length-num">75</div></a></div><div class="data-item"><a href="/tags/"><div class="headline">标签</div><div class="length-num">69</div></a></div><div class="data-item"><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>网站</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/"><i class="fa-fw fas fa-home"></i> <span>首页</span></a></li><li><a class="site-page child" href="/guestbook/"><i class="fa-fw fas fa-pencil-alt"></i> <span>留言</span></a></li><li><a class="site-page child" href="/friends/"><i class="fa-fw fas fa-paper-plane"></i> <span>友链</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>文库</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i> <span>全部标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i> <span>全部分类</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-calendar"></i> <span>文章列表</span></a></li><li><a class="site-page child" href="/random/"><i class="fa-fw fas fa-shoe-prints"></i> <span>随便逛逛</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>实验室</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/laboratory/"><i class="fa-fw fa fa-lightbulb-o"></i> <span>项目展示</span></a></li><li><a class="site-page child" href="/fcircle/"><i class="fa-fw fa fa-puzzle-piece"></i> <span>友链订阅</span></a></li><li><a class="site-page child" href="/charts/"><i class="fa-fw fa fa-pie-chart"></i> <span>博客统计</span></a></li><li><a class="site-page child" href="/update/"><i class="fa-fw fa fa-commenting-o"></i> <span>更新日志</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fas fa-camera-retro"></i> <span>相册</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fa fa-video-camera"></i> <span>视频</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i> <span>歌单</span></a></li><li><a class="site-page child" href="/focus/"><i class="fa-fw fa fa-check-square-o"></i> <span>关注</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>关于</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-user"></i> <span>本站</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heart"></i> <span>Love</span></a></li><li><a class="site-page child" href="/donate/"><i class="fa-fw fa fa-gratipay"></i> <span>打赏</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url(https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/090412-1557363852af44.jpg)"><nav id="nav"><div id="nav-group"><div id="blog_name"><a id="site-name" href="/">Justlovesmile</a></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>网站</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/"><i class="fa-fw fas fa-home"></i> <span>首页</span></a></li><li><a class="site-page child" href="/guestbook/"><i class="fa-fw fas fa-pencil-alt"></i> <span>留言</span></a></li><li><a class="site-page child" href="/friends/"><i class="fa-fw fas fa-paper-plane"></i> <span>友链</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>文库</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i> <span>全部标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i> <span>全部分类</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-calendar"></i> <span>文章列表</span></a></li><li><a class="site-page child" href="/random/"><i class="fa-fw fas fa-shoe-prints"></i> <span>随便逛逛</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>实验室</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/laboratory/"><i class="fa-fw fa fa-lightbulb-o"></i> <span>项目展示</span></a></li><li><a class="site-page child" href="/fcircle/"><i class="fa-fw fa fa-puzzle-piece"></i> <span>友链订阅</span></a></li><li><a class="site-page child" href="/charts/"><i class="fa-fw fa fa-pie-chart"></i> <span>博客统计</span></a></li><li><a class="site-page child" href="/update/"><i class="fa-fw fa fa-commenting-o"></i> <span>更新日志</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fas fa-camera-retro"></i> <span>相册</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fa fa-video-camera"></i> <span>视频</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i> <span>歌单</span></a></li><li><a class="site-page child" href="/focus/"><i class="fa-fw fa fa-check-square-o"></i> <span>关注</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>关于</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-user"></i> <span>本站</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heart"></i> <span>Love</span></a></li><li><a class="site-page child" href="/donate/"><i class="fa-fw fa fa-gratipay"></i> <span>打赏</span></a></li></ul></div></div></div><div id="nav-right"><div id="search-button"><a class="nav-rightbutton site-page social-icon search"><i class="fas fa-search fa-fw"></i></a></div><div id="darkmode_navswitch"><a class="nav-rightbutton site-page darkmode_switchbutton" onclick="switchDarkMode()"><i class="fas fa-adjust"></i></a></div><div id="toggle-menu"><a class="nav-rightbutton site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></div></nav><div class="coverdiv" id="coverdiv"><img class="cover entered loading" id="post-cover" alt="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/090412-1557363852af44.jpg"></div><div id="post-info"><div class="post-firstinfo" id="post-meta"><span class="post-meta-categories"><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%8D%9A%E5%AE%A2%E7%9B%B8%E5%85%B3/">博客相关</a></span><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">#前端</a><a class="post-meta__tags" href="/tags/Hexo/">#Hexo</a><a class="post-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">#博客</a></div></div><h1 class="post-title">Hexo博客 | 博客中能用到的代码（一）</h1><div id="post-meta"><div class="meta-firstline"><span class="meta-share-time"><span class="meta-avatar"><a class="meta-avatar-img" href="/about/" title="关于作者"><img alt="作者头像" src="" data-lazy-src="/img/avatar.jpg"></a><a class="meta-avatar-name" href="/about/" title="关于作者">Justlovesmile</a></span></span><span class="post-meta-date"><i class="fa-fw post-meta-icon far fa-calendar-alt"></i><span class="post-meta-label">发表于</span><time datetime="2020-04-08T16:16:47.000Z" title="发表于 2020-04-09 00:16:47">2020-04-09</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>8分钟</span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><p>这篇文章介绍了如何使用<code>font awesome图标</code>字体库，使用<code>动态图标</code>，添加<code>网页运行时间</code>，<code>全站变黑白</code>，<code>鼠标点击特效</code>，<code>网页标题的动态效果</code>，<code>网页樱花特效</code>，<code>鼠标触动音乐特效</code>，之前还介绍过<code>打字机效果</code>，可以看看<a href="/posts/24067.html">这篇文章</a></p><span id="more"></span><h2 id="gt-使用font-awesome图标字体库"><a href="#gt-使用font-awesome图标字体库" class="headerlink" title="&gt;使用font awesome图标字体库"></a>&gt;使用font awesome图标字体库</h2><p><a target="_blank" rel="external nofollow noopener noreferrer" href="http://www.fontawesome.com.cn/">Font Awesome中文网</a></p><p>第一步，只需要导入css文件，就可以在全文使用其图标</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure><p>第二步，使用方法：<br>1.在网站中找到自己看上的图标,保存它的名字<code>XXXX</code><br><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/post/GBwWy8.png" alt="GBwWy8.png"><br>2.在需要的位置,插入<code>&lt;i class=&quot;fa fa-XXXX&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fa fa-home&quot;</span> <span class="attr">aria-hidden</span>=<span class="string">&quot;true&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span>首页</span><br></pre></td></tr></table></figure><p>效果如下：</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20201022105849.png"></p><h2 id="gt-使用动态图标"><a href="#gt-使用动态图标" class="headerlink" title="&gt;使用动态图标"></a>&gt;使用动态图标</h2><p><a target="_blank" rel="external nofollow noopener noreferrer" href="https://l-lin.github.io/font-awesome-animation/">Font Awesome Animation</a></p><p>第一步，只需要导入css文件，就可以在全文使用其动态特效图标</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure><p>第二步，使用方法：<br>1.在网站中找到自己看上的动态效果,保存它的名字<code>faa-YYYY</code>，结合font awesome图标<br><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/post/GBjP61.gif" alt="GBjP61.gif"><br>2.在需要的位置,插入<code>&lt;span class=&quot;faa-parent animated-hover&quot;&gt;&lt;i class=&quot;fa fa-XXXX faa-YYYY&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/span&gt;</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;faa-parent animated-hover&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fa fa-home faa-wrench animated&quot;</span> <span class="attr">aria-hidden</span>=<span class="string">&quot;true&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure><p>效果如下：<br><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/faa.gif"></p><h2 id="gt-网页运行时间"><a href="#gt-网页运行时间" class="headerlink" title="&gt;网页运行时间"></a>&gt;网页运行时间</h2><blockquote><p>参考自<a target="_blank" rel="external nofollow noopener noreferrer" href="https://m1314.cn/140.html">网站底部添加网站运行时间代码</a></p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;webtime&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- js --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"><span class="function"><span class="keyword">function</span> <span class="title">show_runtime</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">window</span>.setTimeout(<span class="string">&quot;show_runtime()&quot;</span>, <span class="number">1000</span>);</span></span><br><span class="line"><span class="javascript">        X = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">&quot;12/31/2019 23:59:59&quot;</span>);</span></span><br><span class="line"><span class="javascript">        Y = <span class="keyword">new</span> <span class="built_in">Date</span>();</span></span><br><span class="line"><span class="javascript">        T = (Y.getTime() - X.getTime());</span></span><br><span class="line"><span class="javascript">        M = <span class="number">24</span> * <span class="number">60</span> * <span class="number">60</span> * <span class="number">1000</span>;</span></span><br><span class="line"><span class="javascript">        a = T / M;</span></span><br><span class="line"><span class="javascript">        A = <span class="built_in">Math</span>.floor(a);</span></span><br><span class="line"><span class="javascript">        b = (a - A) * <span class="number">24</span>;</span></span><br><span class="line"><span class="javascript">        B = <span class="built_in">Math</span>.floor(b);</span></span><br><span class="line"><span class="javascript">        c = (b - B) * <span class="number">60</span>;</span></span><br><span class="line"><span class="javascript">        C = <span class="built_in">Math</span>.floor((b - B) * <span class="number">60</span>);</span></span><br><span class="line"><span class="javascript">        D = <span class="built_in">Math</span>.floor((c - C) * <span class="number">60</span>);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.getElementById(<span class="string">&quot;webtime&quot;</span>).innerHTML = <span class="string">&quot;网站已运行了: &quot;</span> + A + <span class="string">&quot;天&quot;</span> + B + <span class="string">&quot;小时&quot;</span> + C + <span class="string">&quot;分&quot;</span> + D + <span class="string">&quot;秒&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    show_runtime();</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>效果如下<br><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/runtime.gif"></p><h2 id="gt-全站变黑白"><a href="#gt-全站变黑白" class="headerlink" title="&gt;全站变黑白"></a>&gt;全站变黑白</h2><blockquote><p>参考自<a target="_blank" rel="external nofollow noopener noreferrer" href="https://m1314.cn/375.html">全站变黑白CSS代码</a></p></blockquote><p>适合在公祭日哀悼使用，兼容所有主流浏览器，直接添加到header或者博客自定义CSS里就可以生效了，开了缓存的记得清除下~</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">    -moz-<span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">    -ms-<span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">    -o-<span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">filter</span>: progid:DXImageTransform.Microsoft.<span class="built_in">BasicImage</span>(grayscale=<span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="gt-鼠标点击特效"><a href="#gt-鼠标点击特效" class="headerlink" title="&gt;鼠标点击特效"></a>&gt;鼠标点击特效</h2><p><a target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/djzhao627/JSClickBubble">github</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> click_cnt = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> $html = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;html&quot;</span>)[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> $body = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;body&quot;</span>)[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">    $html.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> $elem = <span class="built_in">document</span>.createElement(<span class="string">&quot;b&quot;</span>);</span></span><br><span class="line"><span class="javascript">        $elem.style.color = <span class="string">&quot;#E94F06&quot;</span>;</span></span><br><span class="line"><span class="javascript">        $elem.style.zIndex = <span class="number">9999</span>;</span></span><br><span class="line"><span class="javascript">        $elem.style.position = <span class="string">&quot;absolute&quot;</span>;</span></span><br><span class="line"><span class="javascript">        $elem.style.select = <span class="string">&quot;none&quot;</span>;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> x = e.pageX;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> y = e.pageY;</span></span><br><span class="line"><span class="javascript">        $elem.style.left = (x - <span class="number">10</span>) + <span class="string">&quot;px&quot;</span>;</span></span><br><span class="line"><span class="javascript">        $elem.style.top = (y - <span class="number">20</span>) + <span class="string">&quot;px&quot;</span>;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">clearInterval</span>(anim);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">switch</span> (++click_cnt) &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">10</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;OωO&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">20</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;(๑•́ ∀ •̀๑)&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">30</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;(๑•́ ₃ •̀๑)&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">40</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;(๑•̀_•́๑)&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">50</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;（￣へ￣）&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">60</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;(╯°口°)╯(┴—┴&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">70</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;૮( ᵒ̌皿ᵒ̌ )ა&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">80</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;╮(｡&gt;口&lt;｡)╭&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">90</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">100</span>:</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">101</span>:</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">102</span>:</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">103</span>:</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">104</span>:</span></span><br><span class="line"><span class="javascript">            <span class="keyword">case</span> <span class="number">105</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;(ꐦ°᷄д°᷅)&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">default</span>:</span></span><br><span class="line"><span class="javascript">                $elem.innerText = <span class="string">&quot;❤&quot;</span>;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        $elem.style.fontSize = <span class="built_in">Math</span>.random() * <span class="number">10</span> + <span class="number">8</span> + <span class="string">&quot;px&quot;</span>;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> increase = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> anim;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            anim = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">if</span> (++increase == <span class="number">150</span>) &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="built_in">clearInterval</span>(anim);</span></span><br><span class="line"><span class="javascript">                    $body.removeChild($elem);</span></span><br><span class="line"><span class="javascript">                &#125;</span></span><br><span class="line"><span class="javascript">                $elem.style.top = y - <span class="number">20</span> - increase + <span class="string">&quot;px&quot;</span>;</span></span><br><span class="line"><span class="javascript">                $elem.style.opacity = (<span class="number">150</span> - increase) / <span class="number">120</span>;</span></span><br><span class="line"><span class="javascript">            &#125;, <span class="number">8</span>);</span></span><br><span class="line"><span class="javascript">        &#125;, <span class="number">70</span>);</span></span><br><span class="line"><span class="javascript">        $body.appendChild($elem);</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="gt-网页标题的动态效果"><a href="#gt-网页标题的动态效果" class="headerlink" title="&gt;网页标题的动态效果"></a>&gt;网页标题的动态效果</h2><blockquote><p>参考自<a target="_blank" rel="external nofollow noopener noreferrer" href="https://zhangge.net/5032.html">JS代码实现浏览器网页标题的动态切换</a></p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">jQuery(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">/* 排除首页（记得自行修改下首页地址） */</span></span></span><br><span class="line"><span class="javascript">	<span class="keyword">if</span> (location.href != <span class="string">&quot;https://justlovesmile.top/&quot;</span>) &#123; <span class="built_in">document</span>.title = <span class="built_in">document</span>[a] ? <span class="string">&quot;(つェ⊂)誒呀→《&quot;</span> + d + <span class="string">&quot;》&quot;</span> : <span class="string">&quot;(*´∇｀*) 咦好了→《&quot;</span> + d + <span class="string">&quot;》&quot;</span> &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> a, b, d = <span class="built_in">document</span>.title;</span></span><br><span class="line"><span class="javascript">    <span class="string">&quot;undefined&quot;</span> != <span class="keyword">typeof</span> <span class="built_in">document</span>.hidden ? (a = <span class="string">&quot;hidden&quot;</span>, b = <span class="string">&quot;visibilitychange&quot;</span>) : <span class="string">&quot;undefined&quot;</span> != <span class="keyword">typeof</span> <span class="built_in">document</span>.mozHidden ? (a = <span class="string">&quot;mozHidden&quot;</span>, b = <span class="string">&quot;mozvisibilitychange&quot;</span>) : <span class="string">&quot;undefined&quot;</span> != <span class="keyword">typeof</span> <span class="built_in">document</span>.webkitHidden &amp;&amp; (a = <span class="string">&quot;webkitHidden&quot;</span>, b = <span class="string">&quot;webkitvisibilitychange&quot;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="string">&quot;undefined&quot;</span> == <span class="keyword">typeof</span> <span class="built_in">document</span>.addEventListener &amp;&amp; <span class="string">&quot;undefined&quot;</span> == <span class="keyword">typeof</span> <span class="built_in">document</span>[a] || <span class="built_in">document</span>.addEventListener(b, c, !<span class="number">1</span>)</span></span><br><span class="line"><span class="javascript">&#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>效果如下：</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/post/GDF12T.png" alt="GDF12T.png"></p><h2 id="gt-网页樱花特效"><a href="#gt-网页樱花特效" class="headerlink" title="&gt;网页樱花特效"></a>&gt;网页樱花特效</h2><blockquote><p>参考自<a target="_blank" rel="external nofollow noopener noreferrer" href="https://hylpq.com/archives/sakuracss3/">博客樱花飘落动效</a></p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/sakura.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>只需要导入js就可以了</p><h2 id="gt-鼠标触动音乐特效"><a href="#gt-鼠标触动音乐特效" class="headerlink" title="&gt;鼠标触动音乐特效"></a>&gt;鼠标触动音乐特效</h2><blockquote><p>参考自<a target="_blank" rel="external nofollow noopener noreferrer" href="https://www.zhangxinxu.com/wordpress/2017/06/html5-web-audio-api-js-ux-voice/">利用HTML5 Web Audio API给网页JS交互增加声音</a></p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;button&quot;</span>&gt;</span>经过我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="built_in">window</span>.AudioContext = <span class="built_in">window</span>.AudioContext || <span class="built_in">window</span>.webkitAudioContext;</span></span><br><span class="line"><span class="javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (!<span class="built_in">window</span>.AudioContext) &#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;当前浏览器不支持Web Audio API&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 按钮元素</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> eleButton = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 创建新的音频上下文接口</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> audioCtx = <span class="keyword">new</span> AudioContext();</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 发出的声音频率数据，表现为音调的高低</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> arrFrequency = <span class="string">&quot;880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 659 698 659 698 1046 659 1046 1046 1046 987 698 698 987 987 880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 698 1046 987 1046 1174 1174 1174 1046 1046 880 987 784 880 1046 1174 1318 1174 1318 1567 1046 987 1046 1318 1318 1174 784 784 880 1046 987 1174 1046 784 784 1396 1318 1174 659 1318 1046 1318 1760 1567 1567 1318 1174 1046 1046 1174 1046 1174 1567 1318 1318 1760 1567 1318 1174 1046 1046 1174 1046 1174 987 880 880 987 880&quot;</span>.split(<span class="string">&quot; &quot;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 音调依次递增或者递减处理需要的参数</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> start = <span class="number">0</span>, direction = <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 鼠标hover我们的按钮的时候</span></span></span><br><span class="line"><span class="javascript">    eleButton.addEventListener(<span class="string">&#x27;mouseenter&#x27;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 当前频率</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> frequency = arrFrequency[start];</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 如果到头，改变音调的变化规则（增减切换）</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">if</span> (!frequency) &#123;</span></span><br><span class="line"><span class="javascript">            direction = -<span class="number">1</span> * direction;</span></span><br><span class="line"><span class="javascript">            start = start + <span class="number">2</span> * direction;</span></span><br><span class="line"><span class="javascript">            frequency = arrFrequency[start];</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 改变索引，下一次hover时候使用</span></span></span><br><span class="line"><span class="javascript">        start = start + direction;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 创建一个OscillatorNode, 它表示一个周期性波形（振荡），基本上来说创造了一个音调</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> oscillator = audioCtx.createOscillator();</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 创建一个GainNode,它可以控制音频的总音量</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> gainNode = audioCtx.createGain();</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 把音量，音调和终节点进行关联</span></span></span><br><span class="line"><span class="javascript">        oscillator.connect(gainNode);</span></span><br><span class="line"><span class="javascript">        <span class="comment">// audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备</span></span></span><br><span class="line"><span class="javascript">        gainNode.connect(audioCtx.destination);</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 指定音调的类型，其他还有square|triangle|sawtooth</span></span></span><br><span class="line"><span class="javascript">        oscillator.type = <span class="string">&#x27;sine&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 设置当前播放声音的频率，也就是最终播放声音的调调</span></span></span><br><span class="line"><span class="javascript">        oscillator.frequency.value = frequency;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 当前时间设置音量为0</span></span></span><br><span class="line"><span class="javascript">        gainNode.gain.setValueAtTime(<span class="number">0</span>, audioCtx.currentTime);</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 0.01秒后音量为1</span></span></span><br><span class="line"><span class="javascript">        gainNode.gain.linearRampToValueAtTime(<span class="number">1</span>, audioCtx.currentTime + <span class="number">0.01</span>);</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 音调从当前时间开始播放</span></span></span><br><span class="line"><span class="javascript">        oscillator.start(audioCtx.currentTime);</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 1秒内声音慢慢降低，是个不错的停止声音的方法</span></span></span><br><span class="line"><span class="javascript">        gainNode.gain.exponentialRampToValueAtTime(<span class="number">0.001</span>, audioCtx.currentTime + <span class="number">1</span>);</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 1秒后完全停止声音</span></span></span><br><span class="line"><span class="javascript">        oscillator.stop(audioCtx.currentTime + <span class="number">1</span>);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">&#125;)();</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></article><div class="post-reward"><div class="reward-button"><i class="fas fa-hamburger"></i> 打赏作者</div><div class="reward-main"><ul class="reward-all"><ul class="reward-group"><li class="reward-item"><a href="/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src="" data-lazy-src="/img/wechat.jpg" alt="微信"></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="" data-lazy-src="/img/alipay.jpg" alt="支付宝"></a><div class="post-qr-code-desc">支付宝</div></li></ul><a class="reward-main-btn" href="/donate"><div class="reward-text">赞赏者名单</div><div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div></a></ul></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/Hexo/">Hexo</a><a class="post-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/090412-1557363852af44.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer="defer"></script></div></div><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-info">Hexo博客 | 博客中能用到的代码（一）</span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="https://blog.justlovesmile.top/posts/56163.html">https://blog.justlovesmile.top/posts/56163.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="external nofollow noopener noreferrer">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://blog.justlovesmile.top" target="_blank">Justlovesmile's BLOG</a>！</span></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/15391.html"><img class="prev-cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/095658-1562983018e455.jpg" onerror='onerror=null,src="/img/404.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Hexo博客 | 博客中能用到的代码（二）</div></div></a></div><div class="next-post pull-right"><a href="/posts/24067.html"><img class="next-cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/111620-1581650180d28c.jpg" onerror='onerror=null,src="/img/404.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">打字机效果 | 使用type.js模拟打字输入回退效果</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/56b0563d.html" title="Hexo博客 | 如何让Butterfly主题导航栏居中"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20220315095300.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-03-15</div><div class="title">Hexo博客 | 如何让Butterfly主题导航栏居中</div></div></a></div><div><a href="/posts/2bfb1caa.html" title="Hexo博客 | 动态分类标签条，自动获取全站分类与标签进行展示"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/202108142119256.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-14</div><div class="title">Hexo博客 | 动态分类标签条，自动获取全站分类与标签进行展示</div></div></a></div><div><a href="/posts/6a260bf6.html" title="Hexo博客 | 如何让你的博客拥有星空背景和流星特效"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/202108121750639.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-12</div><div class="title">Hexo博客 | 如何让你的博客拥有星空背景和流星特效</div></div></a></div><div><a href="/posts/c8972b63.html" title="必看 | Hexo博客搭建超级指南"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715201402.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-07-15</div><div class="title">必看 | Hexo博客搭建超级指南</div></div></a></div><div><a href="/posts/57206.html" title="Hexo博客 | 如何在博客首页添加公告板模块"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200630163919.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-06-30</div><div class="title">Hexo博客 | 如何在博客首页添加公告板模块</div></div></a></div><div><a href="/posts/27301.html" title="Hexo博客 | 采用随机图片作为博客封面背景，真香！"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/display.gif" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-06-29</div><div class="title">Hexo博客 | 采用随机图片作为博客封面背景，真香！</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="" data-lazy-src="/img/avatar.jpg" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="avatar"></div><div class="author-info__name">Justlovesmile</div><div class="author-info__description">一个计算机专业学生的个人博客，记录着学习笔记和生活中的思考，期待着和所有人相遇</div></div><div class="card-info-data is-center"><div class="card-info-data-item"><a href="/archives/"><div class="headline">文章</div><div class="length-num">75</div></a></div><div class="card-info-data-item"><a href="/tags/"><div class="headline">标签</div><div class="length-num">69</div></a></div><div class="card-info-data-item"><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>不定时更新博客，欢迎交换<a href="/friends/"><strong>友链</strong></a>...</p><div class="twopeople"><div class="container" style="height:200px"><canvas class="illo" width="800" height="800" style="max-width:200px;max-height:200px;touch-action:none;width:640px;height:640px"></canvas></div><script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople1.js"></script><script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/zdog.dist.js"></script><script id="rendered-js" src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople.js"></script><style>.twopeople{margin:0;align-items:center;justify-content:center;text-align:center}canvas{display:block;margin:0 auto;cursor:move}</style></div><div style="text-align:center"><a href="https://www.foreverblog.cn/" target="_blank" rel="external nofollow noopener noreferrer"><img src="" data-lazy-src="https://img.foreverblog.cn/logo_en_default.png" alt="foreverblog" style="width:auto;height:16px"></a></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#gt-%E4%BD%BF%E7%94%A8font-awesome%E5%9B%BE%E6%A0%87%E5%AD%97%E4%BD%93%E5%BA%93"><span class="toc-text">&gt;使用font awesome图标字体库</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gt-%E4%BD%BF%E7%94%A8%E5%8A%A8%E6%80%81%E5%9B%BE%E6%A0%87"><span class="toc-text">&gt;使用动态图标</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gt-%E7%BD%91%E9%A1%B5%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4"><span class="toc-text">&gt;网页运行时间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gt-%E5%85%A8%E7%AB%99%E5%8F%98%E9%BB%91%E7%99%BD"><span class="toc-text">&gt;全站变黑白</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gt-%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E7%89%B9%E6%95%88"><span class="toc-text">&gt;鼠标点击特效</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gt-%E7%BD%91%E9%A1%B5%E6%A0%87%E9%A2%98%E7%9A%84%E5%8A%A8%E6%80%81%E6%95%88%E6%9E%9C"><span class="toc-text">&gt;网页标题的动态效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gt-%E7%BD%91%E9%A1%B5%E6%A8%B1%E8%8A%B1%E7%89%B9%E6%95%88"><span class="toc-text">&gt;网页樱花特效</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#gt-%E9%BC%A0%E6%A0%87%E8%A7%A6%E5%8A%A8%E9%9F%B3%E4%B9%90%E7%89%B9%E6%95%88"><span class="toc-text">&gt;鼠标触动音乐特效</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/56b0563d.html" title="Hexo博客 | 如何让Butterfly主题导航栏居中"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20220315095300.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="Hexo博客 | 如何让Butterfly主题导航栏居中"></a><div class="content"><a class="title" href="/posts/56b0563d.html" title="Hexo博客 | 如何让Butterfly主题导航栏居中">Hexo博客 | 如何让Butterfly主题导航栏居中</a><time datetime="2022-03-15T01:25:18.000Z" title="发表于 2022-03-15 09:25:18">2022-03-15</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/bb608df3.html" title="目标检测 | RetinaNet，经典单阶段Anchor-Based目标检测模型"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20220314113659.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="目标检测 | RetinaNet，经典单阶段Anchor-Based目标检测模型"></a><div class="content"><a class="title" href="/posts/bb608df3.html" title="目标检测 | RetinaNet，经典单阶段Anchor-Based目标检测模型">目标检测 | RetinaNet，经典单阶段Anchor-Based目标检测模型</a><time datetime="2022-03-14T03:26:21.000Z" title="发表于 2022-03-14 11:26:21">2022-03-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/fc798de3.html" title="目标检测 | Faster R-CNN，经典两阶段检测模型"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20220312220823.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="目标检测 | Faster R-CNN，经典两阶段检测模型"></a><div class="content"><a class="title" href="/posts/fc798de3.html" title="目标检测 | Faster R-CNN，经典两阶段检测模型">目标检测 | Faster R-CNN，经典两阶段检测模型</a><time datetime="2022-03-12T13:59:01.000Z" title="发表于 2022-03-12 21:59:01">2022-03-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/d150f284.html" title="深度学习 | 小样本学习基础概念"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/202201271037441.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="深度学习 | 小样本学习基础概念"></a><div class="content"><a class="title" href="/posts/d150f284.html" title="深度学习 | 小样本学习基础概念">深度学习 | 小样本学习基础概念</a><time datetime="2022-01-27T02:24:38.000Z" title="发表于 2022-01-27 10:24:38">2022-01-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/e05a9ab6.html" title="Jupyter Lab | 安装、配置、插件推荐、多用户使用教程"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/image-20211125175041150.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="Jupyter Lab | 安装、配置、插件推荐、多用户使用教程"></a><div class="content"><a class="title" href="/posts/e05a9ab6.html" title="Jupyter Lab | 安装、配置、插件推荐、多用户使用教程">Jupyter Lab | 安装、配置、插件推荐、多用户使用教程</a><time datetime="2021-11-25T09:38:43.000Z" title="发表于 2021-11-25 17:38:43">2021-11-25</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div id="footer_deal"><a class="social-icon" href="mailto:865717150@qq.com" target="_blank" title="Email" rel="external nofollow noopener noreferrer"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://blog.csdn.net/qq_43701912" target="_blank" title="CSDN" rel="external nofollow noopener noreferrer"><i class="iconfont icon-csdn1"></i></a><a class="social-icon" href="https://github.com/Justlovesmile" target="_blank" title="Github" rel="external nofollow noopener noreferrer"><i class="fab fa-github"></i></a><a class="social-icon" href="https://weibo.com/u/5252319712" target="_blank" title="微博" rel="external nofollow noopener noreferrer"><i class="fa fa-weibo"></i></a><a class="social-icon" href="https://space.bilibili.com/168738824" target="_blank" title="Bilibili" rel="external nofollow noopener noreferrer"><i class="fas iconfont icon-bilibili"></i></a></div><div id="mj-footer"><div class="footer-group"><h3 class="footer-title">关于</h3><div class="footer-links"><a class="footer-item" target="_blank" rel="external nofollow noopener noreferrer" href="https://www.justlovesmile.top/">个人主页</a><a class="footer-item" href="/donate/">赞赏博主</a><a class="footer-item" href="/update/">博客日志</a><a class="footer-item" href="/charts/">博客统计</a></div></div><div class="footer-group"><h3 class="footer-title">归档</h3><div class="footer-links"><a class="footer-item" href="/archives/">文章归档</a><a class="footer-item" href="/tags/">全部标签</a><a class="footer-item" href="/categories/">全部分类</a><a class="footer-item" href="/random/">随机文章</a></div></div><div class="footer-group"><h3 class="footer-title">导航</h3><div class="footer-links"><a class="footer-item" href="/guestbook/">博客留言</a><a class="footer-item" href="/friends/">友情链接</a><a class="footer-item" href="/fcircle/">友链订阅</a><a class="footer-item" href="/atom.xml">RSS订阅</a></div></div><div class="footer-group"><h3 class="footer-title">协议</h3><div class="footer-links"><a class="footer-item" href="/privacy/">隐私协议</a><a class="footer-item" href="/cookies/">Cookies</a><a class="footer-item" href="/cc/">版权协议</a></div></div></div><div id="footer-banner"><div class="footer-banner-links"><div class="footer-banner-left"><div id="footer-banner-tips">©2019 - 2022 By Justlovesmile</div></div><div class="footer-banner-right"><a class="footer-banner-link" target="_blank" rel="external nofollow noopener noreferrer" href="http://beian.miit.gov.cn/">蜀ICP备20004960号</a><a class="footer-banner-link" href="/update/">主题</a><a class="footer-banner-link" href="/about/">关于</a></div></div></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">本地搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i> <span>数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"></div></div><hr><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script defer="defer" src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script><script defer="defer" src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script defer="defer" src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script defer="defer" src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script defer="defer" src="/js/search/local-search.js"></script><div class="js-pjax"><script>(()=>{const t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"blog-comment-3gt33nkmf9f97e6e",region:"ap-shanghai",onCommentLoaded:function(){btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.vemoji)"))}},null))},o=()=>{"object"!=typeof twikoo?getScript("https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js").then(t):setTimeout(t,0)};btf.loadComment(document.getElementById("twikoo-wrap"),o)})()</script></div><canvas id="universe"></canvas><script defer="defer">console.log("\n %c 欢迎来到Justlovesmile の Blog %c https://github.com/Justlovesmile %c https://blog.justlovesmile.top \n","color: #f9ed69; background: #252a34; padding:5px 0;","background: #3fc1c9; padding:5px 0;","background: #3fc1c9; padding:5px 0;")</script><script defer="defer" src="/js/rgbaster.min.js"></script><script defer="defer" src="/js/justlovesmile.js"></script><script>window.addEventListener("load",async()=>{navigator.serviceWorker.register("/js/sw-cdn.js?time="+(new Date).getTime()).then(async e=>{"true"!=window.localStorage.getItem("install")&&(window.localStorage.setItem("install","true"),setTimeout(()=>{window.location.search="?time="+(new Date).getTime()},1e3))}).catch(e=>{console.log("sw-cdn.js error")})})</script></div></body></html>